<template>
  <div class="choujiang acea-row row-middle row-center" @click="showDrawer" :style="view?'border: none !important;':'cursor: pointer;'">
    <LuckyWheel
      ref="LuckyWheel"
      :width="props.width+'px'"
      :height="props.height+'px'"
      :default-style="{fontSize:props.fontSize+'px',fontColor:props.fontColor}"
      :blocks="props.blocks"
      :prizes="props.prizes"
      :buttons="props.buttons"
      @start="start"
      @end="end"
      :key="props.width+props.height+props.fontSize+props.fontColor"
    />
    <drawer :attr="list.attr" :show.sync="show" @change="editAttr" :index="list.index" />
  </div>
</template>

<script>
import drawer from "../drawer"
import changeAttr from '@/utils/changeAttr.js'
import changeViewAttr from '@/utils/changeViewAttr.js'

export default {
  components:{
    drawer
  },
  name:"choujiang",
  props:{
    list:{
      type:Object,
    },
    view:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      show:false,
      props:{},
      changeAttr,
    }
  },
  created() {
    this.editAttr()
  },
  methods: {
    start () {
      if(this.view){
        this.$refs.LuckyWheel.play()
        setTimeout(() => {
          this.$refs.LuckyWheel.stop(Math.random() * 8 >> 0)
        }, 3000)
      }
    },
    end (prize) {
      alert(`恭喜你获得${prize.fonts[0].text}`)
    },
    showDrawer(){
      if(!this.view){
        this.show = true
      }
    },
    editAttr(){
      if(this.view){
        this.props = changeViewAttr(this.list.attr,this.list.index)
      }else{
        this.props = changeAttr(this.list.attr,this.list.index)
      }
    }
  },
}
</script>

<style scoped>
  .choujiang{
    box-sizing: border-box;
    border: 1px dashed transparent;
  }
  .choujiang:hover{
    border: 1px dashed #1989fa;
  }
</style>